﻿<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="format-detection" content="telephone=no,email=no,adress=no" />
    <meta name="wap-font-scale" content="no" />
    <meta name="keywords" content="关键字" />
    <meta name="description" content="描述" />
    <meta name="author" content="莫升贵" />
    <meta name="copyright" content="本网站版权归 莫升贵 所有" />
    <title>登陆</title>
    <link href="dist/element-ui/lib/theme-chalk/index.css" rel="stylesheet" type="text/css" />
    <link href="dist/css/animate.min.css" rel="stylesheet" type="text/css" />
    <link href="dist/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="dist/css/login.min.css" rel="stylesheet" type="text/css" />
    <script src="dist/vue/dist/vue.js" type="text/javascript"></script>
    <script src="dist/vue-resource/dist/vue-resource.min.js" type="text/javascript"></script>
    <script src="dist/js-md5/src/md5.js" type="text/javascript"></script>
    <script src="dist/js-base64/base64.min.js" type="text/javascript"></script>
    <script src="dist/element-ui/lib/index.js" type="text/javascript"></script>
</head>

<body style="padding: 0; margin: 0;">
    <div id="app">
        <el-form id="login" class="animated fadeInDown" :model="form" :rules="rules" ref="form">
            <h2 class="title">系统登录</h2>
            <el-form-item prop="uid" class="myInput">
                <i class="fa fa-user fa-2x"></i>
                <el-input placeholder="请输入账号" v-model="form.uid"></el-input>
            </el-form-item>
            <el-form-item prop="pwd" class="myInput">
                <i class="fa fa-key fa-2x"></i>
                <el-input type="password" placeholder="请输入密码" v-model="form.pwd"></el-input>
            </el-form-item>
            <el-form-item>
                <!--极验验证码-->
            </el-form-item>
            <el-form-item>
                <el-checkbox v-model="form.checked" style="color:#fff;">记住密码</el-checkbox>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" :loading="form.loading" @click="login()" style="width: 100%;">
                    <strong>登录</strong>
                </el-button>
            </el-form-item>
        </el-form>
        <div class="diver animated fadeInUp">
            <span>第三方登录</span>
        </div>
        <div class="autho animated fadeInUp">
            <div class="autho-item" style="background:#00a1fb;" @click="showSorry">
                <img src="dist/img/qq.png" />
                <div>QQ</div>
            </div>
            <div class="autho-item" style="background:#1cca44;" @click="showSorry">
                <img src="dist/img/wechat.png" />
                <div>微信</div>
            </div>
            <div class="autho-item" style="background:#e82741;" @click="showSorry">
                <img src="dist/img/weibo.png" />
                <div>微博</div>
            </div>
        </div>
    </div>
</body>

</html>
<script type="text/javascript">
    var IS_DEBUG = true;
    var HTTP_PORT = IS_DEBUG ? "http://127.0.0.1:3000/" : "";
    var app = new Vue({
        el: "#app",
        data: {
            form: { uid: "", pwd: "", checked: true, validate: "", loading: false },
            rules: {
                uid: [
                    { required: true, message: "请输入账号", trigger: 'blur' }
                ],
                pwd: [
                    { required: true, message: "请输入密码", trigger: 'blur' }
                ]
            }
        },
        created: function () {
            Vue.http.get(HTTP_PORT + "Http/Msg/MsgStart.ashx?method=Backend_Logout"); //直接退出或授权登录
            sessionStorage.removeItem("storage_permits");
            sessionStorage.removeItem("session_history");
            this.fullLoginInfo();
        },
        methods: {
            login: function () {
                var that = this;
                that.$refs["form"].validate(function (valid) {
                    if (valid) {
                        that.form.loading = true;
                        Vue.http.post(HTTP_PORT + "Http/Msg/MsgStart.ashx?method=Backend_Login", { ID: that.form.uid, PWD: md5(that.form.pwd) }, { emulateJSON: true }).then(function (res) {
                            that.form.loading = false;
                            if (res.data.flag === "True") {
                                if (that.form.checked) {
                                    that.msgSetCookie("LOGINCOOKIES", Base64.encode(JSON.stringify(that.form)), 7);
                                } else {
                                    that.msgSetCookie("LOGINCOOKIES", "", -1);
                                }
                                if (res.data.result.accessToken) {
                                    SetSysTokenSession(
                                        "accessToken",
                                        res.data.result.accessToken
                                    );
                                    SetSysTokenSession(
                                        "permitToken",
                                        res.data.result.permitToken
                                    );
                                }
                                location.replace("./index.html#/main");
                            } else {
                                that.$message.error(res.data.message);
                            }
                        });
                    } else {
                        return false;
                    }
                });
            },
            showSorry: function () {
                this.$message("此功能暂未开放，敬请期待");
            },
            fullLoginInfo: function () {
                var cookies = this.msgGetCookie("LOGINCOOKIES");
                if (cookies) {
                    try {
                        this.form = JSON.parse(Base64.decode(cookies));
                    } catch (err) {
                        //todo
                    }
                }
            },
            msgSetCookie: function (name, value, time, path) {
                path = path || "";
                var d = new Date();
                d.setTime(d.getTime() + (time * 24 * 60 * 60 * 1000));
                var expires = "expires=" + d.toUTCString();
                path = "path=" + path;
                document.cookie = name + "=" + value + "; " + expires + "; " + path;
            },
            msgGetCookie: function (name) {
                name = (name + "=");
                var ca = document.cookie.split(';');
                for (var i = 0; i < ca.length; i++) {
                    var c = ca[i];
                    while (c.charAt(0) == ' ') c = c.substring(1);
                    if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
                }
                return "";
            }
        }
    });

    function SetSysTokenSession(name, token) {
        if (typeof window.localStorage === "object") {
            sessionStorage.setItem("SysTokenSession." + name, token);
        } else {
            this.MsgSetCookie("SysTokenSession." + name, token, (1 / 24 / 60) * 30);
        }
    }
</script>